<app-chart-host chartType="financial">
  <markdown ngPreserveWhitespaces>
    This chart demonstrates how custom chart types can be plugged into
    `ng2-charts`. Check out the Typescript source code below. This custom chart
    type depends on a package called
    [`chartjs-chart-financial`](https://github.com/chartjs/chartjs-chart-financial).
    This also demonstrates using a different date/time adapter than
    [`moment`](https://www.npmjs.com/package/moment). This demo uses
    [`date-fns`](https://www.npmjs.com/package/date-fns) instead, plugged into
    the `chart.js` module using the
    [`chartjs-adapter-date-fns`](https://www.npmjs.com/package/chartjs-adapter-date-fns)
    package.
  </markdown>

  <canvas
    baseChart
    [data]="financialChartData"
    [options]="financialChartOptions"
    [type]="financialChartType"
  >
  </canvas>

  <button mat-button mat-raised-button color="primary" (click)="randomize()">
    Random Data
  </button>
  <button mat-button mat-raised-button color="primary" (click)="update()">
    Toggle Chart Type
  </button>
</app-chart-host>
